<template>

	<div style="background-color: #171717; height: 100vh;" v-loading="loading">
		<div id="payment" v-if="pay" style="position: fixed;z-index: 99; width: 100%;height: 80%; top: 7%;">
			<div
				style="position: relative;z-index: 99; width: 30%;height: 70%; left: 25%;top:20%; background-color: #000;color: #fff;padding-top: 3%;">
				<div
					style="position: absolute; left: 30%; cursor:pointer;display: inline-block; width: 40%;height: 40px;line-height: 40px; text-align: center;border: 1px solid #fff;background-image: url('./image/alipay.png');">
					微信支付</div>
				<!-- <div
					style="position: absolute; right: 5%; display: inline-block; width: 40%;height: 40px;line-height: 40px;text-align: center; border: 1px solid #fff;">
					支付宝支付</div> -->
				<div
					style="position: relative;background-color: rgb(0,0,0);width: 80%;height: 200px;left: 10%;top: 12%;margin-top: 5%;">
					<img :src="payImg" style="width: 100%;height: 100%;object-fit: contain">
				</div>
				<div style="position: relative;left: 17%;top: 25%;">
					<button style="border: none; width: 30%;height: 30px;cursor: pointer;" @click="close()">取消</button>
					<button style="border: none; width: 30%;height: 30px;margin-left: 5%;cursor: pointer;"
						@click="isBuyed()">我已支付</button>
					<div style="width: 65%;text-align: center;font-size: 12px;margin-top: 10px;">支付期间请勿进行其他操作！！！
					</div>
				</div>
			</div>
		</div>

		<div style=" margin: 20px 10px;font-size: 18px; font-weight: 700;color: #fff;">产品配置</div>
		<div
			style="margin: 20px 1px 2px 20px;background-color: #171717;height: 40px; line-height: 50px;padding-left:20px;font-weight: 700;margin-right: 20px;color: #fff;">
			{{product_info.goodsName}}
		</div>
		<div style="display: flex;margin-right: 20px;background-color: #171717;">
			<div
				style="margin: 2px 3px 2px 20px;background-color: #171717;display: flex; flex-direction: column;font-size: 13px;width: 40%;color: #fff; justify-content: center;border: 1px solid #fff;">
				<div class="DI_box">
					<div class="title">区域</div>
					<div class="value">{{product_info.areaName}}</div>
				</div>
				<div class="DI_box">
					<div class="title">网络类型</div>
					<div class="value">{{product_info.NetworkType}}</div>
				</div>
				<div class="DI_box">
					<div class="title">CPU</div>
					<div class="value">{{product_info.cpu}}</div>
				</div>
				<div class="DI_box">
					<div class="title">内存</div>
					<div class="value">{{product_info.memory}}</div>
				</div>
				<div class="DI_box">
					<div class="title">系统盘</div>
					<div class="value">{{product_info.SysDiskSize}}</div>
				</div>
				<div class="DI_box">
					<div class="title">数据盘</div>
					<div class="value">{{product_info.DataDiskSize}}</div>
				</div>
				<!-- <div class="DI_box">
					<div class="title">下载宽带</div>
					<div class="value">{{product_info.loadBandwidth}}</div>
				</div> -->
				<div class="DI_box">
					<div class="title">宽带</div>
					<div class="value">{{product_info.bandwidth}}</div>
				</div>
				<div class="DI_box">
					<div class="title">IP数</div>
					<div class="value">{{product_info.ipNum}}</div>
				</div>
				<div class="DI_box">
					<div class="title">流量</div>
					<div class="value">{{product_info.flow}}</div>
				</div>
			</div>
			<div
				style="margin: 2px 0 2px 3px;width: 50%;background-color: #171717;padding:10px 0;font-size: 13px;padding-left: 20px;">
				<div class="DI_box" v-if="type == 0" style="border: none;">
					<div class="title">
						操作系统 *
					</div>
					<div>
						<el-select v-model="value" style="height: 40px; width: 100%; border-radius: 5px;color: white"
							ref="mySelect">
							<el-option v-for="item in OS_info" :key="item.value" :label="item.label" :value="item.value"
								style="color: white">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="DI_box" style="border: none;">
					<div class="title">
						周期 *
					</div>
					<div style="display: flex;">
						<div v-for="(item,index) in pay_time" v-bind:key="index"
							style="border: 1px solid lightgray;padding: 5px 10px;cursor: pointer;"
							@click="change_sty(index)" :class="{'mb_good_over':index === selectedIndex}">
							{{item.data}}
						</div>
					</div>
				</div>
				<div class="DI_box" v-if="type == 0" style="border: none;">
					<div class="title">
						主机密码 *
					</div>
					<div>
						<input type="text" v-model="maPasswprd"
							style="height: 30px; border: 1px solid lightgray;border-radius: 5px;" />
					</div>
				</div>
				<div
					style="background-color: #171717;height: 150px;font-weight: 700;margin-right: 20px;display: flex;align-items: center;padding-left: 5%; color: #fff;">
					<div style="margin-right: 20%;font-size: 30px;">总价:￥{{money}}</div>
					<div class="od_buy_button" @click="toPay()">
						确定购买
					</div>

				</div>
			</div>
		</div>


	</div>

</template>

<script>
	import axios from 'axios';
	import {
		getGoodsById,
		getRenew,
		addnewOrder,
		getOrderInfoById
	} from '../../api/work.js'
	export default {

		data() {
			return {
				loading: false,
				show_loading: false,
				pay: false,
				money: '--',
				id: 0,
				type: '',
				product_info: {},
				OS: [{
					value: '选项1',
					label: 'CentOS'
				}, {
					value: '选项2',
					label: 'Debian'
				}, {
					value: '选项3',
					label: 'Ubuntu'
				}, ],
				value: '',
				OS_info: [{
						value: '选项1',
						label: 'CentOS-7.6.1810-x64'
					}, {
						value: '选项2',
						label: 'CentOS-6.10.1907-x64'
					}, {
						value: '选项3',
						label: ' 宝塔集成(面板信息登录SSH输入bt default)'
					},
					{
						value: '选项4',
						label: ' CentOS-8-Stream-x64'
					},
					{
						value: '选项5',
						label: ' CentOS-9-Stream-x64'
					},
				],
				pay_time: [{
					id: 1,
					data: "月付",
					days: 30
				}, {
					id: 2,
					data: "季付",
					days: 90
				}, {
					id: 3,
					data: "半年付",
					days: 180
				}, {
					id: 4,
					data: "年付",
					days: 365
				}, ],
				selectedIndex: false, // 初始化时没有选中任何项
				areaName: "",
				maPasswprd: "", //机器密码
				payImg: "", //支付二维码
				timer: null,
				serverType: 0,
			};
		},
		mounted() {
			this.id = this.$route.query.id
			this.type = this.$route.query.type
			this.serverType = parseInt(this.$route.query.serverType)
			// this.product_info =  JSON.parse(this.$route.query.data)
			this.get_goods_info();
		},
		methods: {
			// 通过id获取商品信息
			get_goods_info() {
				this.OS_info = []
				let data = {
					packageId: this.id
				}
				let renew_data = {
					encryptRobotId: this.id
				}
				if (this.type == 0) {
					getGoodsById(data).then(response => {

						// 请求成功，处理返回的数据
						this.product_info = response;
						console.log(response)
						// this.OS_info = response.data.operating_system

						for (let i = 0; i < response.operating_system.length; i++) {
							console.log(response.operating_system[i])
							this.OS_info.push({
								label: response.operating_system[i],
								value: response.operating_system[i]
							})
						}
					}).catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
					});
				} else {
					getRenew(renew_data).then(response => {
						// 请求成功，处理返回的数据
						this.product_info = response;
						console.log(this.product_info.areaName)
						for (let i = 0; i < response.operating_system.length; i++) {
							console.log(response.operating_system[i])
							this.OS_info.push({
								label: response.operating_system[i],
								value: response.operating_system[i]
							})
						}
					}).catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
					});
				}

			},
			change_sty(index) {
				this.selectedIndex = index;
				console.log(index)
				if (index === 0) {
					this.money = this.product_info.monthlyPrice
				}
				if (index === 1) {
					this.money = this.product_info.quarterlyPrice
				}
				if (index === 2) {
					this.money = this.product_info.halfYearPrice
				}
				if (index === 3) {
					this.money = this.product_info.annuallyPrice
				}

			},
			toPay() {
				let userId = localStorage.getItem("USER-ID")
				if (this.type == 0) {
					if (!userId || userId === '' || userId === null) {
						this.$message.error("请登录后购买产品")
						return
					}
					if (this.maPasswprd.trim().length === 0 || this.value.trim().length === 0 || this.selectedIndex ===
						false) {
						this.$message.error("请确保每一项都有填写");
						return
					}

					if (!/(?=.*[a-z])/.test(this.maPasswprd)) {
						this.$message.warning('主机密码 至少有一个小写字母')
						return
					}
					if (!/(?=.*[A-Z])/.test(this.maPasswprd)) {
						this.$message.warning('主机密码 至少有一个大写字母')
						return
					}
					if (!/(?=.*\d)/.test(this.maPasswprd)) {
						this.$message.warning('主机密码 至少有一个数字')
						return
					}
					if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@#$%.?]{6,20}$/.test(this.maPasswprd)) {
						this.$message.warning('密码必须包含 小写字母 大写字母 数字')
						return
					}
				}

				console.log(this.product_info)
				let data;
				if (this.type == 0) {
					data = {
						// ...this.product_info,
						// order:this.product_info,
						servertype: this.serverType,
						orderAmount: this.money,
						paymentType: 0, // 0表示支付宝，1表示微信
						effectivedayNum: this.pay_time[this.selectedIndex].days,
						password: this.maPasswprd,
						goodsId: this.product_info.goodsId,
						userId: localStorage.getItem("USER-ID")
					}
				} else {
					data = {
						// ...this.product_info,
						// order:this.product_info,
						servertype: this.serverType,
						encryptRobotId: this.id,
						orderAmount: this.money,
						paymentType: 0, // 0表示支付宝，1表示微信
						effectivedayNum: this.pay_time[this.selectedIndex].days,
						password: this.maPasswprd,
						goodsId: this.product_info.goodsId,
						userId: localStorage.getItem("USER-ID")
					}
				}




				let moneyType;
				if (this.selectedIndex == 0) {
					moneyType = "monthly"
				} else if (this.selectedIndex == 1) {
					moneyType = "quarterly"
				} else if (this.selectedIndex == 2) {
					moneyType = "halfyear"
				} else if (this.selectedIndex == 3) {
					moneyType = "yearly"
				}
				let data3 = "?payTimeName=" + moneyType + "&password=" + this.maPasswprd + "&templateName=" + this
					.value


				axios.post("http://45.145.75.2:8102/orders/generateOrders" + data3, data, {
					headers: {
						"token": localStorage.getItem('LZY-TOKEN')
					}
				}).then(res => {
					console.log(res)
					let data2 = {
						orderId: res.data.data
					}
					if (this.serverType == 0) {
						// 自己创建
						axios.get("http://45.145.75.2:8102/pay/WHPpay", {
							params: data2
						}).then(res => {
							this.payImg = res.data.data
							this.pay = true;
							let loading;
							let data4 = {
								orderId: data2.orderId
							}
							this.timer = setInterval(() => {
								// 根据订单id获取数据
								getOrderInfoById(data4).then(res => {
									// 订单已支付
									if (res.payCallbackState === 1) {
										// 隐藏支付码
										this.pay = false
										// 开始转圈圈
										this.loading = true
									} else {
										// 转圈圈结束
										this.loading = false
									}
									if (res.orderState === 1) {
										this.$message.success("支付成功")

										clearInterval(this.timer)
										setTimeout(() => {
											this.$message.success("正在创建云主机，请稍后")
										}, 1000)
										this.$router.push('/demo/mygoods')
									}
								})
							}, 1000)

						})
					} else {
						// 平台购买
						axios.get("http://45.145.75.2:8102/pay/WHPpay2", {
							params: data2
						}).then(res => {
							this.payImg = res.data.data
							this.pay = true;
							let loading;
							let data4 = {
								orderId: data2.orderId
							}
							this.timer = setInterval(() => {
								// 根据订单id获取数据
								getOrderInfoById(data4).then(res => {
									// 订单已支付
									if (res.payCallbackState === 1) {
										// 隐藏支付码
										this.pay = false
										// 开始转圈圈
										this.loading = true
									} else {
										// 转圈圈结束
										this.loading = false
									}
									if (res.orderState === 1) {
										this.$message.success("支付成功")
										clearInterval(this.timer)
										setTimeout(() => {
											this.$message.success(
												"云主机等待创建中，稍后将会发至您的邮箱")
										}, 1000)
										this.openPayMession()
									}
								})
							}, 1000)

						})
					}

				})


			},
			openPayMession() {
				this.$alert('您已成功购买服务器，我们将在24小时内将服务器信息以邮件的形式发送至您的邮箱，如有其它疑问，请联系管理人员：xxxxxxxxxxx', '购买成功通知', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push("/demo/index")
						location.reload(true)
					}
				});
			},
			isBuyed() {
				this.pay = false
				this.show_loading = false
			},
			close() {
				this.pay = false;
				this.show_loading = false
				clearInterval(this.timer)
			},
			getRenew(eid) {
				console.log(eid)
			}
		},
		computed: {}
	}
</script>

<style>
	.DI_box {
		height: 40px;
		margin-top: 10px;
		padding-left: 5%;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		color: #fff;
		border-bottom: 1px solid #b3b3b3;
	}

	.title {
		height: 100%;
		width: 200px;
		line-height: 40px;
		color: #fff;
	}

	.value {

		display: flex;
		align-items: center;
		height: 70%;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		/* padding: 3px 14px; */
		padding-left: 30px;
		border-radius: 5px;
	}

	.mb_good_over {
		background-color: #2948df;
		color: #fff;
	}

	.el-select-dropdown__item.selected {}

	.el-select-dropdown__item.hover {
		background-color: #4c4c4c;
	}

	.el-select-dropdown__list {
		background-color: #171717;
	}

	input {
		background-color: #171717;
		color: #fff;
	}


	.el-select .el-input__inner {
		background-color: #171717;
	}

	.el-input__inner {
		color: white !important;
		background-color: #171717 !important;
	}

	.od_buy_button {
		display: flex;
		font-size: 15px;
		height: 30%;
		width: 20%;
		background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
		border: none;
		padding: 0 15px 0 15px;
		border-radius: 0.5rem !important;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-family: 'Avalors Personal Use';
		letter-spacing: 5px;
		color: #FFFFFF;
		text-shadow: 0 0 4px white;
		cursor: pointer;
	}

	.el-select-dropdown__list {
		background-color: #171717;
	}
</style>
